import React, {Component} from 'react';
import './index.css';

// 创建Context对象
const MyContext = React.createContext();
const {Provider, Consumer} = MyContext;

export default class DemoContext extends Component {
	state = {name: 'tom'};

	render() {
		return (
			<div className="a">
				我是父组件A参数为:{this.state.name}
				<Provider value={this.state.name}>
					<B></B>
				</Provider>
			</div>
		);
	}
}

class B extends Component {
	render() {
		return (
			<div className="b">
				我是子组件B<C></C>
			</div>
		);
	}
}

// class C extends Component {
//     // 声明接收context
//     static contextType=MyContext

// 	render() {
// 		return <div className="c">我是孙组件C,接收A组件传入的名字:{this.context}</div>;
// 	}
// }

function C() {
	return (
		<div className="c">
			我是孙组件C,接收A组件传入的名字:
			<Consumer>
				{value => {
					return value;
				}}
			</Consumer>
		</div>
	);
}
